<template>
  <div class="fit" ref="chart"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  components: {},
  props: {
  },
  data() {
    return {
      chart: null,
      theme: 'light',
    };
  },
  watch: {},
  computed: {},
  methods: {
    renderChart() {
      if (!this.chart && this.$refs.chart) {
        this.chart = echarts.init(this.$refs.chart, this.theme);
      }
      const option = this.getOptions();
      this.chart.clear();
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.resize();
      }, 100);
    },
    getOptions() {
      return {
        title: {
          text: '销售额排行',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        },
        yAxis: {
          type: 'value',
          axisLine: { // y轴
            show: false,
          },
          axisTick: { // y轴刻度线
            show: false,
          },
        },
        series: [
          {
            name: '零售总额',
            type: 'bar',
            stack: 'total',
            barWidth: 30,
            emphasis: {
              focus: 'series',
            },
            data: [420, 432, 901, 534, 490, 730, 1320, 1320, 934, 845, 730, 630],
          },
        ],
      };
    },
  },
  created() { },
  mounted() {
    this.renderChart();
  },
};
</script>
<style lang="stylus"></style>
